<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;我的发布列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- tabs -->
            <div class="handle-tab">
                <el-tabs v-model="activeTab" @tab-click="changState">
                    <el-tab-pane label="印厂" name=1></el-tab-pane>
                    <el-tab-pane label="设备" name=2></el-tab-pane>
                    <el-tab-pane label="招聘" name=3></el-tab-pane>
                    <el-tab-pane label="供应" name=4></el-tab-pane>
                    <el-tab-pane label="求购" name=5></el-tab-pane>
                    <el-tab-pane label="心情" name=6></el-tab-pane>
                </el-tabs>
            </div>

            
            <!-- 筛选条件 -->
            <div style="height:40px"></div>
            <el-form :inline="true"  class="demo-form-inline" style="margin-bottom:15px;">
                <el-form-item label="审核状态:">
                    <el-select v-model="state" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.state" :label="item.label" :value="item.state">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="用户昵称:">
                    <el-input v-model="userName" placeholder="请输入用户昵称" clearable style="width:280px;"></el-input>
                </el-form-item>
                <el-form-item label="标题:">
                    <el-input v-model="title" placeholder="请输入查看内容标题" clearable style="width:280px;"></el-input>
                </el-form-item>
                
                <el-form-item >
                    <el-button type="primary" @click="onSelect"> &nbsp;&nbsp;查询&nbsp;&nbsp;  </el-button>
                    <el-button type="primary" @click="onResetting"> &nbsp;&nbsp;重置&nbsp;&nbsp;  </el-button>
                </el-form-item>
            </el-form>
            <!-- 这里引入table数据子组件（6个孩子，不同条件显示） -->
            <factory :data="tableData" v-show="activeTab == 1"></factory>
            <equipment :data="tableData" v-show="activeTab == 2"></equipment>
            <recruit :data="tableData" v-show="activeTab == 3"  @from-child-msg="listenChildMsg"></recruit>
            <supply :data="tableData" v-show="activeTab == 4"></supply>
            <buy :data="tableData" v-show="activeTab == 5"></buy>
            <mood :data="tableData" v-show="activeTab == 6"></mood>
            <!-- 分页 -->
            <div class="pagination" v-show="totalPages>1">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                </el-pagination>
            </div>     
        </div>
    
    </div>
</template>
<script>
import {getpubCheckList,postCheckPublish,} from '@/api/check/publish'
import factory from './components/factory'
import equipment from './components/equipment'
import recruit from './components/recruit'
import supply from './components/supply'
import buy from './components/buy'
import mood from './components/mood'
export default {
    name:"checkPublishList",
     //声明组件
    components:{
        factory,
        equipment,
        recruit,
        supply,
        buy,
        mood,
    },
    data() {
        return {
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalElements:1,//默认的总条数
            totalPages:1,//默认的总页数
            tableData:[],//表格数据
            delVisible:false, //默认dialog 不弹出
            title:'', //标题
            userName:'',//用户昵称
            options:[{state:0,label:'审核中'},{state:1,label:'审核不通过'},{state:2,label:'审核通过'}],//审核状态option选项
            state:'',//下来选中 0审核中，1审核不通过，2审核通过
            activeTab:"1",//tabs默认选中  发布分类：1印厂,2设备,3招聘,4供应,5求购,6心情
            isChecked:false,//审核界面默认隐藏 true显示
            data:'',//获取到详情的数据
            id:'',//当前用户id
            isFlag:'',//
        }
    },
    //实例创建
    created(){
        //
        this.getDate();
    },
    //计算属性
    watch:{
        if(isFlag){
            console.log("我检测到了")
            this.getDate();
        }
    },
    //方法
    methods: {
        listenChildMsg(){
            if(isFlag){
                console.log("我检测到了")
                this.getDate();
            }else{
                console.log("报错");
            }
        },
        //获取数据
        getDate(){
            getpubCheckList(this.state,this.activeTab,this.userName,this.title,this.pageIndex,this.pageSize).then((response)=> {
                console.log(response);
                if(response.code==200){
                    var data = response.data;//当前返回的数据
                    this.tableData = data.list;//列表数据
                    // console.log(this.tableData);
                    this.totalElements = data.total; //总条数
                    this.totalPages = Math.ceil(data.total/this.pageSize);//总页数
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //改变分类选项change
        changeValue(){
            // console.log("我触发了");
            this.getDate();
        },
        //发布
        urlAdd(){
            this.$router.push({ path:'/substation/add'})
        },
        //查询
        onSelect(){
            this.pageIndex =1;
            this.getDate();
        },
        //重置筛选条件
        onResetting(){
            this.state = '';
            this.userName = '';
            this.title = '';
            this.getDate();
        },
        //tabs切换触发
        changState(tab) {
            this.activeTab = tab.name;//改变tab激活项
            this.getDate();
        },
        //分页
        handleCurrentChange(val){
            this.pageIndex =val;
            this.getDate();
        },
        //查看详情
        handleLook(index,row){
            if(row.id && row.id>0){
                //跳转到详情页
                this.$router.push({ path: '/enterprise/details',query:{id:row.id}});
            }
        },
        
    }
}
</script>
<style lang="stylus" scoped>
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
    .download{
        color #67C23A;
    }
</style>


